<template>
    <div class="content">
        <p class="title">发送报告</p>

        <p class="info">这是你信息保存前的最后一页。请对下列信息做相应修改，然后点击「保存」。</p>
        <div class="banxing">
            <Form
                ref="formValidate"
                class="form"
                :model="$store.state.dati"
                :rules="ruleValidate"
                :label-width="80"
            >
                <Row>
                    <Col span="12">
                        <FormItem label="姓名" prop="name">
                            <Input v-model="$store.state.dati.name" placeholder="请输入姓名"></Input>
                        </FormItem>
                        <FormItem label="性别" prop="sex">
                            <RadioGroup v-model="$store.state.dati.sex">
                                <Radio label="man">先生</Radio>
                                <Radio label="woman">女士</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="电子邮箱地址" prop="mail">
                            <Input v-model="$store.state.dati.mail" placeholder="xxxx@xx.com"></Input>
                        </FormItem>
                        <FormItem label="公司/组织名称" prop="company">
                            <Input v-model="$store.state.dati.company" placeholder="请输入公司/组织名称"></Input>
                        </FormItem>
                        <FormItem label="职位/工作职称" prop="job">
                            <Input v-model="$store.state.dati.job" placeholder="请输入您的职位/工作职称"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <span class="biaoti">递送方式</span>
                        <FormItem prop="disong">
                            <Checkbox v-model="$store.state.dati.disong">通过电子邮件递送报告结果</Checkbox>
                        </FormItem>
                        <span class="language">报告选项</span>
                        <P class="biaotixia">选择报告语言。</P>
                        <FormItem prop="language">
                            <Select v-model="$store.state.dati.language">
                                <Option label="中文（简体）（Chinese-Simplified）" value="Chinese" >中文（简体）（Chinese-Simplified）</Option>
                            </Select>
                        </FormItem>
                        <p class="biaotixia">报告是否要彩色打印？</p>
                        <FormItem prop="isColor">
                            <RadioGroup v-model="$store.state.dati.isColor">
                                <Radio label="true" >是</Radio>
                                <Radio label="false">否</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                </Row>
            </Form>

            <div class="xieyi">
                <div class="wenben">
                    <span class="title">数据使用同意协议</span>
                    <span class="tishi" style="font-size:23px">*</span>
                    <i></i>
                    <p class="text">
                        勾选以下方框，即表示您同意 E学E测 处理与您完成评估相关的上述个人数据及您的 IP 地址。完成本项评估，即表示您明确同意 E学E测 对您的个人数据进行评估，并使用评估结果生成各项报告，包括您的个性化档案报告，该报告仅向要求您完成评估的公司或机构发布。如果您随后决定不希望您的个人数据被使用，请联系要求您完成评估的公司或机构，且您的个人数据将在 30 天后被删除。您有权随时撤销处理您个人数据的同意书，具体操作可访问
                        <a
                            href="https://yixueyice.com"
                        >https://yixueyice.com</a>。
                    </p>
                </div>

                <div class="xieyi1">
                    <Checkbox v-model="xieyi1">请勾选此处，表示同意使用您的个人数据*</Checkbox>
                </div>
                <div class="wenben">
                    <span class="title">免责协议</span>
                    <i></i>
                    <p
                        class="text"
                    >鉴于您已获得允许可进行评估，则您特此免除 E学E测、其代理商、分销商、管理人员、员工、代表、相关或附属公司和继任者对您进行评估时所产生或附带的、与要求您完成评估的公司或机构使用评估结果时所相关的一切责任以及任何类型、任何性质和任何类别的诉讼或诉讼事由。E学E测 对要求您完成评估的公司或机构所作出的任何决定不承担任何责任。报告中的信息不应作为雇用或工作职位选择时考虑的唯一依据。</p>
                </div>
                <div class="xieyi1">
                    <Checkbox v-model="xieyi2">请勾选此处，表示您已阅读并了解上述协议*</Checkbox>
                </div>
                <p style="font-size: 15px;">
                    保护您的隐私对我们而言非常重要，我们承诺并继续遵循以下计划的严格要求：欧盟 - 美国《隐私盾协议》、瑞士 - 美国《隐私盾协议》和《通用数据保护条例》(GDPR)。更多信息，请参阅我们的隐私声明：
                    <a href>
                        隐私声明
                    </a>
                </p>
            </div>

            <Button class="lbtn" type="primary" size="large">上一页</Button>
            <Button
                class="rbtn"
                @click="handleSubmit('formValidate')"
                :type="xieyi1&&xieyi2? 'primary' : 'default'"
                :disabled="!(xieyi1&&xieyi2)"
                size="large"
            >下一页</Button>
            <Button @click="tishi">模态框</Button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            xieyi1: false,
            xieyi2: false,
            modal2: false,
            ruleValidate: {
                name: [
                    { required: true, message: "请输入姓名", trigger: "blur" }
                ],
                sex:[
                    { required: true, message: "请选择性别", trigger: "blur" }
                ],
                mail: [
                    { required: true, message: "请输入邮箱", trigger: "blur" },
                    {
                        type: "email",
                        message: "邮箱格式不正确",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.$router.push({ path: "/dati/wenjuan" });
                    this.$Message.success("已前往下一页!");
                } else {
                    this.$Message.error("Fail!");
                }
            });
        },
        handleReset(name) {
            this.$refs[name].resetFields();
        },
        tishi() {
            this.$Modal.success({
                title: "您的测评已完成",
                content: "测评报告稍后将发至您邮箱，请注意查收",
                onOk: () => {
                    setTimeout(() => {
                        this.$Modal.success({
                            title: "正在跳转主页",
                            content: "感谢您完成E学E测-DISC行为风格测评问卷",
                            onOk: () => {
                                this.$router.push({ name: "index" });
                            }
                        });
                    }, 300);
                },
                onCancel: () => {
                    this.modal2 = true;
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.content {
    padding: 40px 60px 0px 60px;
    margin-bottom: 80px;

    .title {
        font-size: 35px;
        color: #17233d;
        font-weight: bold;
    }
    u {
        display: block;
        height: 0px;
        width: 100%;
        border: 1px solid #dcdee2;
    }
    .info {
        line-height: 100px;
        color: #17233d;
        font-size: 18px;
        border-top: 1px solid #dcdee2;
        border-bottom: 1px solid #dcdee2;
    }
    .banxing {
        margin: 0px auto;
        width: 900px;
        .form {
            padding-top: 50px;
            width: 700px;
            margin: 0px auto;
        }
    }
    .tishi {
        color: red;
    }
    .xieyi {
        width: 100%;
        margin: 0px auto;
        .xieyi1 {
            margin-top: 8px;
            width: auto;
            margin-bottom: 8px;

            padding: 5px 10px;
            border-radius: 3px;
            color: #515a6e;
        }
        .wenben {
            background: #f8f8f9;
            padding: 15px;
        }
        .title {
            font-size: 18px;
        }
        .text {
            font-size: 15px;
        }
    }
    .lbtn {
        margin-top: 30px;
        float: left;
    }
    .rbtn {
        margin-top: 30px;
        float: right;
    }
}
.biaoti {
    font-size: 18px;
    padding-left: 76px;
}
.biaotixia {
    padding-left: 76px;
    font-size: 13px;
}
</style>